.main {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.video-box {
		position: relative;
		flex: 1;
		background-color: #000;
		position: relative;
		video {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
		}
		.title {
			color: #fff;
			font-weight: bold;
			position: absolute;
			left: 20px;
			bottom: 20px;
			p {
				margin-bottom: 5px;
				font-size: 30px;
			}
		}
	}
	.control {
		position: relative;
		display: flex;
		justify-content: space-around;
		padding: 25px;
		span {
			font-size: 30px;
			color: #000;
		}
		.progress-bar {
			position: absolute;
			top: -6px;
			left: 0;
			width: 100%;
			height: 6px;
			background-color: #ccc;
			div {
				width: 0%;
				height: 6px;
				// background-color: skyblue;
				background: linear-gradient(to right, red 0%, orange 100%);
				border-radius: 0 3px 3px 0;
			}
		}
	}
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(3, 100, 244, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	a {
		width: 120px;
		height: 120px;
		border-radius: 60px;
		background-color: #79f0c2;
		color: #fff;
		margin: 0 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&:nth-of-type(2) {
			background-color: #ff6060;
		}
		span {
			font-size: 40px;
		}
		i {
			font-size: 18px;
		}
	}
}
